<template>
<div class="box">
    <van-cell @click="selectDate" title="账单列表" value="选择时间" />

    <div v-if="list.length != 0" class="billList">

        <div class="billItem" v-for="(item,index) in list" :key="index">
            <div style="flex:1">
                <div style="color:#252525;font-size:14px;font-weight:500">
                    {{item.charge_type_name}}
                </div>
                <div style="color:#adadad;font-size:14px;margin-top:8px">
                    {{item.charge_date}}
                </div>
            </div>
            <div style="flex:1;text-align:right;color:#252525;font-size:16px;font-weight:500">{{item.total_charge_amt|format}}</div>
        </div>

    </div>

    <div v-if="list.length == 0" style="margin-top:10px">
        <van-cell value="暂无数据" />
    </div>

    <float-icons padding="10 0 60 0" class="icons-warp">
        <div class="float-icon-item">
            <img src="../../assets/dargIcon/back.png" alt="" @click="handleIcons('/home')" />
            <span>返回</span>
        </div>
        <!-- <div class="float-icon-item">
            <img src="../../assets/dargIcon/cart-icon.png" alt="" @click="handleIcons('/cart')" />
            <span>购物车</span>
        </div> -->
    </float-icons>

    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker @confirm="confirm" @cancel="cancel" v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate" :max-date="maxDate" />
    </van-popup>

</div>
</template>

<script>
import FloatIcons from '@/components/s-icons'
import { isbind } from '../isCheckBind.js'
import {
    getBillInfo
} from "../../sgApi/index.js"
import {
    toast
} from '../../utils/toast.js'
export default {
    name: "bill",
    components: {
        FloatIcons
    },
    data() {
        return {
            minDate: new Date(2019, 0),
            maxDate: new Date(new Date().getFullYear(), new Date().getMonth()),
            currentDate: new Date(new Date().getFullYear(), new Date().getMonth()),
            show: false,
            date: "",
            list: [
                // {
                //     total_charge_amt: 1000,
                //     charge_type_name: "项目收费",
                //     charge_date:"2021-12-05"
                // }
            ]
        }
    },
    mounted() {
        // this.getCurrent()
        isbind()
        this.selectList()

    },
    filters: {
        format(data) {
            return data.toFixed(2)
        }
    },
    methods: {
        selectList() {
            getBillInfo({
                date: this.date,
                // customerCrmId:"SGC00480406"
                customerCrmId: localStorage.getItem("customerCrmId")
            }).then(res => {
                if (res.code == 0) {
                    if (res.data.length == 0) {
                        toast({
                            message: "暂无数据!",
                            time: 2000
                        })
                    } else {
                        this.list = res.data
                    }

                } else {
                    toast({
                        message: "网路错误!",
                        time: 2000
                    })
                }

            })
        },

        handleIcons(id) {
             this.$router.replace({
                path:"/memberCenter"
            })
        },
        getCurrent() {
            let year = new Date().getFullYear() + ""
            let month = (new Date().getMonth() + 1) < 10 ? ("0" + (new Date().getMonth() + 1)) : (new Date().getMonth() + 1)
            this.date = year + month

        },
        selectDate() {
            this.show = true
        },
        confirm(value) {
            let year = new Date(value).getFullYear() + ""
            let month = (new Date(value).getMonth() + 1) < 10 ? ("0" + (new Date(value).getMonth() + 1)) : (new Date(value).getMonth() + 1)

            this.date = year + month
            this.show = false
            this.selectList()

        },
        cancel() {
            this.show = false
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    padding-top: 12px;

    .billList {
        background-color: #ffffff;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 10px;
        padding-bottom: 20px;

        .billItem {
            display: flex;
            flex-direction: row;
            align-items: center;
            border-bottom: 1px solid #d2d2d2;
            padding-bottom: 10px;
            padding-top: 10px;
        }
    }

    .icons-warp {
        // border-radius: 25px;
        border-radius: 25px 0 0 25px;

        .float-icon-item {
            display: flex;
            flex-direction: row;
            // padding-left: 14px;
            // padding-right: 14px;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 80px;
            height: 40px;

            img {
                width: 25px;
                height: 25px;
                margin-bottom: 3px;
            }

            span {
                margin-left: 5px;
                font-size: 12px;
                color: #666666;
            }
        }
    }

}
</style>
